<template>
  <div class="min-h-screen bg-gradient-to-br from-slate-900 via-gray-900 to-black">
    <!-- 导航栏 -->
    <Navbar />

    <!-- 主要内容 -->
    <div class="max-w-4xl mx-auto px-6 py-12">
      <!-- 标题区域 -->
      <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-white mb-4">用户协议</h1>
        <p class="text-gray-400 text-lg">最后更新时间：2025年10月31日</p>
      </div>

      <!-- 用户协议内容 -->
      <div class="bg-white/5 backdrop-blur-lg border border-white/10 rounded-2xl p-8 space-y-8">
        <!-- 协议概述 -->
        <section>
          <h2 class="text-2xl font-bold text-white mb-4">1. 协议概述</h2>
          <div class="text-gray-300 leading-relaxed space-y-3">
            <p>
              欢迎使用球球助手（以下简称"本平台"或"我们"）。本用户协议（以下简称"本协议"）是您与本平台之间就使用本平台提供的足球数据查询服务所订立的协议。
            </p>
            <p>
              请您仔细阅读本协议的全部内容，特别是免责条款和法律适用条款。如果您对本协议的任何条款表示异议，您可以选择不使用本平台服务。您使用本平台服务的行为将视为对本协议全部条款的接受。
            </p>
            <p>本协议适用于您通过任何方式访问和使用我们的产品和服务，包括但不限于网站、移动应用程序等。</p>
          </div>
        </section>

        <!-- 服务性质说明 -->
        <section>
          <h2 class="text-2xl font-bold text-white mb-4">2. 服务性质说明</h2>
          <div class="text-gray-300 leading-relaxed space-y-3">
            <div class="bg-blue-900/20 border border-blue-500/20 rounded-lg p-4">
              <p class="text-blue-400 font-semibold mb-2">服务定位：</p>
              <ul class="list-disc list-inside space-y-1 text-sm">
                <li>本平台是足球数据查询工具，为足球爱好者提供数据展示服务</li>
                <li>本平台提供公开的足球比赛数据、球队信息等查询服务</li>
                <li>本平台提供的所有数据内容仅供学习和了解使用</li>
                <li>所有数据均来自公开渠道，仅供参考</li>
              </ul>
            </div>
          </div>
        </section>

        <!-- 服务内容 -->
        <section>
          <h2 class="text-2xl font-bold text-white mb-4">3. 服务内容</h2>
          <div class="text-gray-300 leading-relaxed space-y-4">
            <p>本平台主要提供以下服务：</p>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div class="bg-white/5 rounded-lg p-4">
                <h3 class="text-lg font-semibold text-blue-400 mb-2">数据查询服务</h3>
                <ul class="list-disc list-inside space-y-1 text-sm">
                  <li>足球比赛公开数据展示</li>
                  <li>历史战绩数据查询</li>
                  <li>球队阵容信息展示</li>
                  <li>比赛数据可视化</li>
                  <li>赛程安排查询</li>
                </ul>
              </div>
              <div class="bg-white/5 rounded-lg p-4">
                <h3 class="text-lg font-semibold text-blue-400 mb-2">用户功能</h3>
                <ul class="list-disc list-inside space-y-1 text-sm">
                  <li>比赛信息查询</li>
                  <li>历史记录查看</li>
                  <li>个性化推荐</li>
                  <li>用户反馈</li>
                  <li>会员服务</li>
                </ul>
              </div>
            </div>
          </div>
        </section>

        <!-- 用户资格 -->
        <section>
          <h2 class="text-2xl font-bold text-white mb-4">4. 用户资格</h2>
          <div class="text-gray-300 leading-relaxed space-y-3">
            <p>使用本平台服务，您需要：</p>
            <ul class="list-disc list-inside space-y-1 ml-4">
              <li>具有完全民事行为能力</li>
              <li>提供真实、准确、完整的个人信息</li>
              <li>遵守当地法律法规</li>
              <li>同意本协议和隐私政策</li>
            </ul>
          </div>
        </section>

        <!-- 用户权利与义务 -->
        <section>
          <h2 class="text-2xl font-bold text-white mb-4">5. 用户权利与义务</h2>
          <div class="text-gray-300 leading-relaxed space-y-4">
            <div>
              <h3 class="text-lg font-semibold text-blue-400 mb-2">5.1 用户权利</h3>
              <ul class="list-disc list-inside space-y-1 ml-4">
                <li>享受本平台提供的数据查询服务</li>
                <li>根据会员等级享受相应的查询权限</li>
                <li>对本平台服务提出意见和建议</li>
                <li>在符合条件的情况下申请注销账户</li>
                <li>要求本平台保护个人隐私信息</li>
              </ul>
            </div>

            <div>
              <h3 class="text-lg font-semibold text-blue-400 mb-2">5.2 用户义务</h3>
              <ul class="list-disc list-inside space-y-1 ml-4">
                <li>遵守国家法律法规和本协议规定</li>
                <li>合理使用平台数据查询功能</li>
                <li>不得利用本平台进行违法活动</li>
                <li>不得恶意攻击或破坏本平台系统</li>
                <li>不得传播虚假或误导性信息</li>
                <li>不得侵犯他人知识产权</li>
                <li>理性看待数据信息，数据仅供学习参考</li>
              </ul>
            </div>
          </div>
        </section>

        <!-- 会员服务 -->
        <section>
          <h2 class="text-2xl font-bold text-white mb-4">6. 会员服务</h2>
          <div class="text-gray-300 leading-relaxed space-y-4">
            <p>本平台提供不同等级的会员服务，具体服务内容以平台实际提供的为准：</p>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div class="bg-white/5 rounded-lg p-4">
                <h3 class="text-lg font-semibold text-gray-400 mb-2">普通会员</h3>
                <div class="text-2xl font-bold text-white mb-2">免费</div>
                <ul class="list-disc list-inside space-y-1 text-sm">
                  <li>基础比赛数据展示</li>
                  <li>球队基本信息查询</li>
                </ul>
              </div>
              <div class="bg-blue-900/20 border border-blue-500/20 rounded-lg p-4">
                <h3 class="text-lg font-semibold text-blue-400 mb-2">VIP会员</h3>
                <div class="text-2xl font-bold text-white mb-2">¥69.9</div>
                <ul class="list-disc list-inside space-y-1 text-sm">
                  <li>完整比赛数据展示</li>
                  <li>历史数据查询</li>
                  <li>球队详细信息</li>
                </ul>
              </div>
              <div class="bg-red-900/20 border border-red-500/20 rounded-lg p-4">
                <h3 class="text-lg font-semibold text-red-400 mb-2">SVIP会员</h3>
                <div class="text-2xl font-bold text-white mb-2">¥129.9</div>
                <ul class="list-disc list-inside space-y-1 text-sm">
                  <li>高级数据筛选功能</li>
                  <li>多赛季历史数据</li>
                  <li>7x24优先客服支持</li>
                </ul>
              </div>
            </div>

            <div class="bg-yellow-900/20 border border-yellow-500/20 rounded-lg p-4 mt-4">
              <p class="text-yellow-400 font-semibold mb-2">会员服务说明：</p>
              <ul class="list-disc list-inside space-y-1 text-sm">
                <li>会员权益按照购买时的服务条款执行</li>
                <li>查询次数每日北京时间00:00重置，不累积至次日</li>
                <li>会员服务仅用于获取更多数据查询功能，所有数据仅供学习参考</li>
                <li>本平台保留调整会员服务内容的权利，但已购买会员的权益不受影响</li>
              </ul>
            </div>
          </div>
        </section>

        <!-- 会员购买与支付 -->
        <section>
          <h2 class="text-2xl font-bold text-white mb-4">7. 会员购买与支付</h2>
          <div class="text-gray-300 leading-relaxed space-y-4">
            <div>
              <h3 class="text-lg font-semibold text-blue-400 mb-2">7.1 购买方式</h3>
              <ul class="list-disc list-inside space-y-1 ml-4">
                <li>您可以通过平台提供的在线支付方式购买会员服务</li>
                <li>支持的支付方式包括但不限于：微信支付、支付宝等第三方支付平台</li>
                <li>您需要确保支付账户信息准确无误，因支付信息错误导致的损失由您自行承担</li>
              </ul>
            </div>

            <div>
              <h3 class="text-lg font-semibold text-blue-400 mb-2">7.2 支付确认</h3>
              <ul class="list-disc list-inside space-y-1 ml-4">
                <li>会员服务在支付成功后即时生效</li>
                <li>如遇支付异常，请保存支付凭证并及时联系客服</li>
                <li>请勿通过非官方渠道购买会员，以免造成财产损失</li>
                <li>本平台不会以任何名义要求您通过私人账户转账</li>
              </ul>
            </div>

            <div>
              <h3 class="text-lg font-semibold text-blue-400 mb-2">7.3 发票服务</h3>
              <ul class="list-disc list-inside space-y-1 ml-4">
                <li>如需开具发票，请在购买后通过平台反馈功能提交申请</li>
                <li>发票申请需在购买后30天内提出</li>
                <li>发票内容为"信息技术服务费"或"技术服务费"</li>
              </ul>
            </div>

            <div class="bg-blue-900/20 border border-blue-500/20 rounded-lg p-4">
              <p class="text-blue-400 font-semibold mb-2">支付安全提示：</p>
              <ul class="list-disc list-inside space-y-1 text-sm">
                <li>本平台使用第三方支付平台进行交易，支付过程符合行业安全标准</li>
                <li>本平台不会存储您的完整银行卡号或支付密码</li>
                <li>请在安全的网络环境下进行支付操作</li>
                <li>如发现账户异常，请立即修改密码并联系客服</li>
              </ul>
            </div>
          </div>
        </section>

        <!-- 会员有效期与续费 -->
        <section>
          <h2 class="text-2xl font-bold text-white mb-4">8. 会员有效期与续费</h2>
          <div class="text-gray-300 leading-relaxed space-y-4">
            <div>
              <h3 class="text-lg font-semibold text-blue-400 mb-2">8.1 会员期限</h3>
              <ul class="list-disc list-inside space-y-1 ml-4">
                <li>会员服务按购买时选择的期限（月度/季度/年度）计算</li>
                <li>会员有效期自购买成功之时起计算，精确到秒</li>
                <li>会员到期后，您的账户将自动降为普通会员</li>
                <li>会员有效期内，您可随时查看剩余时长</li>
              </ul>
            </div>

            <div>
              <h3 class="text-lg font-semibold text-blue-400 mb-2">8.2 续费说明</h3>
              <div class="bg-green-900/20 border border-green-500/20 rounded-lg p-4 mb-3">
                <p class="text-green-400 font-semibold mb-2">不自动续费承诺：</p>
                <p class="text-sm">
                  本平台<strong>不会自动扣费续费</strong>，所有会员服务到期后需要您主动购买续费。我们尊重您的选择权，不会在未经您明确同意的情况下从您的账户扣款。
                </p>
              </div>
              <ul class="list-disc list-inside space-y-1 ml-4">
                <li>您可以在会员到期前或到期后任意时间续费</li>
                <li>续费后的会员期限在当前会员到期时间基础上顺延（到期前续费）或从续费时间开始计算（到期后续费）</li>
                <li>会员升级：您可以随时从低等级会员升级到高等级会员，升级后立即享受新等级权益</li>
              </ul>
            </div>

            <div>
              <h3 class="text-lg font-semibold text-blue-400 mb-2">8.3 会员叠加规则</h3>
              <ul class="list-disc list-inside space-y-1 ml-4">
                <li>同一等级会员可叠加购买，有效期累加</li>
                <li>不同等级会员不可叠加，后购买的会员将在当前会员到期后生效</li>
                <li>会员升级时，原会员剩余时长将按比例折算或保留至升级会员到期后</li>
              </ul>
            </div>
          </div>
        </section>

        <!-- 退款政策 -->
        <section>
          <h2 class="text-2xl font-bold text-white mb-4">9. 退款政策</h2>
          <div class="text-gray-300 leading-relaxed space-y-4">
            <div class="bg-yellow-900/20 border border-yellow-500/20 rounded-lg p-4">
              <p class="text-yellow-400 font-semibold mb-2">退款原则：</p>
              <p class="text-sm">
                由于会员服务为虚拟商品且在购买后即时生效，原则上不支持退款。但在以下特定情况下，我们会酌情处理退款申请。
              </p>
            </div>

            <div>
              <h3 class="text-lg font-semibold text-blue-400 mb-2">9.1 可申请全额退款的情况</h3>
              <ul class="list-disc list-inside space-y-1 ml-4">
                <li><strong>重复购买：</strong>因系统错误导致重复扣款，可申请退还重复支付部分</li>
                <li><strong>未生效服务：</strong>支付成功但会员权益未能正常开通，可申请全额退款</li>
                <li><strong>平台责任：</strong>因平台技术故障导致会员服务无法正常使用超过72小时，可申请按比例退款</li>
                <li><strong>服务终止：</strong>本平台因运营原因终止服务，将退还剩余会员期限对应的费用</li>
              </ul>
            </div>

            <div>
              <h3 class="text-lg font-semibold text-blue-400 mb-2">9.2 不予退款的情况</h3>
              <ul class="list-disc list-inside space-y-1 ml-4">
                <li>会员服务已开通并正常使用（已使用查询次数）</li>
                <li>因用户个人原因不再需要会员服务</li>
                <li>用户违反本协议规定被终止服务</li>
                <li>购买会员后对服务内容或数据结果不满意</li>
                <li>因用户自身网络环境或设备问题导致无法使用服务</li>
                <li>会员到期后申请退款</li>
                <li>通过非官方渠道购买的会员服务</li>
              </ul>
            </div>

            <div>
              <h3 class="text-lg font-semibold text-blue-400 mb-2">9.3 退款流程</h3>
              <ul class="list-disc list-inside space-y-1 ml-4">
                <li><strong>申请时限：</strong>自购买之日起7天内提出退款申请</li>
                <li><strong>申请方式：</strong>通过平台反馈功能提交退款申请，需提供订单号和退款理由</li>
                <li><strong>审核时间：</strong>我们将在收到申请后3个工作日内完成审核</li>
                <li><strong>退款方式：</strong>退款将原路返回至您的支付账户</li>
                <li><strong>到账时间：</strong>退款审核通过后，款项将在3-7个工作日内到账（具体到账时间取决于支付平台）</li>
              </ul>
            </div>

            <div>
              <h3 class="text-lg font-semibold text-blue-400 mb-2">9.4 部分退款说明</h3>
              <p class="mb-2">在以下特殊情况下，可能会按比例退款：</p>
              <ul class="list-disc list-inside space-y-1 ml-4">
                <li>因平台原因导致服务长时间中断，将按中断天数比例退还费用</li>
                <li>会员权益发生重大变更且对您造成实质影响，可申请剩余期限的退款</li>
                <li>计算方式：退款金额 = 会员总价 × (剩余天数 ÷ 总天数)</li>
              </ul>
            </div>

            <div class="bg-red-900/20 border border-red-500/20 rounded-lg p-4">
              <p class="text-red-400 font-semibold mb-2">重要提示：</p>
              <ul class="list-disc list-inside space-y-1 text-sm">
                <li>退款申请需提供真实有效的信息，虚假申请将被拒绝</li>
                <li>恶意利用退款政策（如频繁购买后退款）的账户将被限制服务</li>
                <li>退款完成后，对应的会员权益将立即失效</li>
                <li>如对退款结果有异议，可通过客服渠道申诉</li>
              </ul>
            </div>
          </div>
        </section>

        <!-- 知识产权 -->
        <section>
          <h2 class="text-2xl font-bold text-white mb-4">10. 知识产权</h2>
          <div class="text-gray-300 leading-relaxed space-y-3">
            <p>本平台及其内容的知识产权归属如下：</p>
            <ul class="list-disc list-inside space-y-1 ml-4">
              <li><strong>平台技术：</strong>本平台的软件、技术等知识产权归本平台所有</li>
              <li><strong>数据展示：</strong>平台数据展示内容仅供您个人使用，不得商业传播</li>
              <li><strong>用户内容：</strong>您提交的反馈、评论等内容，您保留相应权利</li>
              <li><strong>第三方内容：</strong>比赛数据、新闻资讯等第三方内容，版权归原作者所有</li>
            </ul>
            <p>未经本平台书面许可，您不得：</p>
            <ul class="list-disc list-inside space-y-1 ml-4">
              <li>复制、传播本平台的专有技术</li>
              <li>将平台数据用于商业用途</li>
              <li>反向工程本平台的软件系统</li>
              <li>使用本平台商标、标识等</li>
            </ul>
          </div>
        </section>

        <!-- 免责声明 -->
        <section>
          <h2 class="text-2xl font-bold text-white mb-4">11. 免责声明</h2>
          <div class="text-gray-300 leading-relaxed space-y-3">
            <div class="bg-yellow-900/20 border border-yellow-500/20 rounded-lg p-4">
              <p class="text-yellow-400 font-semibold mb-2">重要免责声明：</p>
              <ul class="list-disc list-inside space-y-1 text-sm">
                <li>本平台提供的数据展示仅供学习参考</li>
                <li>本平台不保证数据的准确性、完整性、及时性</li>
                <li>足球数据来自公开渠道，可能存在延迟或错误</li>
                <li>用户应理性看待数据信息，数据仅供学习了解使用</li>
                <li>我们不对因使用本平台数据而产生的任何后果承担责任</li>
                <li>本平台仅提供数据查询服务，不涉及任何商业交易</li>
              </ul>
            </div>

            <p>其他免责情况：</p>
            <ul class="list-disc list-inside space-y-1 ml-4">
              <li>因不可抗力导致的服务中断</li>
              <li>因第三方服务提供商问题导致的数据延迟或错误</li>
              <li>因用户操作不当导致的数据丢失</li>
              <li>因网络环境问题导致的服务异常</li>
              <li>因数据源问题导致的信息不准确</li>
            </ul>
          </div>
        </section>

        <!-- 服务变更与终止 -->
        <section>
          <h2 class="text-2xl font-bold text-white mb-4">12. 服务变更与终止</h2>
          <div class="text-gray-300 leading-relaxed space-y-4">
            <div>
              <h3 class="text-lg font-semibold text-blue-400 mb-2">12.1 服务变更</h3>
              <p>本平台保留以下权利：</p>
              <ul class="list-disc list-inside space-y-1 ml-4">
                <li>根据技术发展调整服务内容</li>
                <li>根据法律法规要求修改服务</li>
                <li>根据运营需要调整收费标准</li>
                <li>暂停或终止特定功能服务</li>
              </ul>
            </div>

            <div>
              <h3 class="text-lg font-semibold text-blue-400 mb-2">12.2 账户终止</h3>
              <p>以下情况下，本平台有权终止您的账户：</p>
              <ul class="list-disc list-inside space-y-1 ml-4">
                <li>您违反本协议规定</li>
                <li>您进行违法或违规活动</li>
                <li>您长期不使用账户（超过12个月）</li>
                <li>您主动申请注销账户</li>
              </ul>
            </div>
          </div>
        </section>

        <!-- 争议解决 -->
        <section>
          <h2 class="text-2xl font-bold text-white mb-4">13. 争议解决</h2>
          <div class="text-gray-300 leading-relaxed space-y-3">
            <p>因本协议产生的争议，双方应友好协商解决。协商不成的，按以下方式处理：</p>
            <ul class="list-disc list-inside space-y-1 ml-4">
              <li>本协议适用中华人民共和国法律</li>
              <li>因本协议引起的或与本协议有关的任何争议，应提交本平台所在地人民法院诉讼解决</li>
            </ul>
          </div>
        </section>

        <!-- 协议修改 -->
        <section>
          <h2 class="text-2xl font-bold text-white mb-4">14. 协议修改</h2>
          <div class="text-gray-300 leading-relaxed space-y-3">
            <p>本平台可能会不时修改本协议。当协议发生重大变更时，我们会：</p>
            <ul class="list-disc list-inside space-y-1 ml-4">
              <li>在网站显著位置发布更新通知</li>
              <li>通过邮件或其他方式通知您</li>
              <li>更新协议顶部的"最后更新时间"</li>
            </ul>
            <p>如果您不同意修改后的协议内容，您有权停止使用本平台服务。继续使用服务将视为您接受修改后的协议。</p>
          </div>
        </section>

        <!-- 联系我们 -->
        <section>
          <h2 class="text-2xl font-bold text-white mb-4">15. 联系我们</h2>
          <div class="text-gray-300 leading-relaxed space-y-3">
            <p>如果您对本协议有任何疑问、意见或建议，请通过以下方式联系我们：</p>
            <div class="bg-white/5 rounded-lg p-4 space-y-2">
              <p><strong>邮箱：</strong>1730821420@qq.com</p>
              <p><strong>客服时间：</strong>周一至周五 9:00-18:00</p>
              <p><strong>响应时间：</strong>我们将在收到您的请求后3个工作日内回复</p>
            </div>
          </div>
        </section>

        <!-- 协议生效 -->
        <section>
          <h2 class="text-2xl font-bold text-white mb-4">16. 协议生效</h2>
          <div class="text-gray-300 leading-relaxed space-y-3">
            <p>本协议自您注册账户并点击"同意"按钮时生效，对双方具有法律约束力。</p>
            <p>本协议的最终解释权在法律允许的范围内归本平台所有。</p>
            <div class="bg-yellow-900/20 border border-yellow-500/20 rounded-lg p-4 mt-4">
              <p class="text-yellow-400 font-semibold mb-2">特别提醒：</p>
              <p class="text-sm">
                使用本平台服务即表示您已充分理解本协议内容，特别是免责条款和法律适用条款，并自愿承担使用本平台服务的所有风险。
              </p>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// SEO配置
useSEO({
  title: '用户协议 - 球球助手',
  description: '了解球球助手用户协议，明确双方权利义务，确保服务使用规范',
  keywords: '用户协议,服务条款,权利义务,球球助手',
});
</script>

<style scoped>
/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}
</style>
